<template>
  <div class="container mainCon">
    <el-row class="titleWrapBox clearfix">
      <div class="fl">
        <span class="blockTitle">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          {{ qyName }}
        </span>
        <p>
          <span class="code">
            统一社会信用代码：
            <span>{{ qyUscc }}</span>
          </span>
          <span class="code">
            注册地区：
            <span>{{ regAreaName }}</span>
          </span>
          <span class="code">
            行业：
            <span>{{ industryName }}</span>
          </span>
          <span class="goSeeDetail" @click="goSeeDetail"
            >查看基本信息 &#155;&#155;</span
          >
        </p>
      </div>
    </el-row>
    <div>
      <el-row>
        <el-col>
          <el-tabs
            v-model="activeName"
            type="card"
            class="commonTab tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="企业员工" name="second">
              <enterpriseStaff
                v-if="isShowQyEmp"
                :companyId="companyId"
                :qyName="qyName"
                :qyUscc="qyUscc"
              ></enterpriseStaff>
            </el-tab-pane>
            <el-tab-pane label="企业考勤" name="third">
              <jcAttendance
                v-if="isShowQyAtt"
                :companyId="companyId"
              ></jcAttendance>
            </el-tab-pane>
            <el-tab-pane label="企业工资" name="fourth">
              <div class="topTitle">
                <div>
                  <span>工资发放日：</span>
                  <span v-if="salaryDay">
                    每月
                    <span>{{ salaryDay }}</span>
                    日
                  </span>
                  <span v-if="!salaryDay">企业尚未填写</span>
                </div>
              </div>
              <jcSalaryList
                v-if="isShowQySalary"
                :companyId="companyId"
              ></jcSalaryList>
            </el-tab-pane>
            <el-tab-pane label="工资专户" name="fifth">
              <salaryAccountDetail
                v-if="isShowAccount"
                :companyId="companyId"
              ></salaryAccountDetail>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <!-- <router-view></router-view> -->
    </div>
  </div>
</template>

<script>
import enterpriseDetail from '@/components/enterpriseSet/enterpriseDetail'
import jcEnterpriseInfo from '@/components/enterpriseSet/jcEnterpriseInfo'
import enterpriseStaff from '@/components/enterpriseSet/enterpriseStaff'
import jcAttendance from '@/components/attendance/jcAttendance'
import jcSalaryList from '@/components/salary/jcSalaryList'
import salaryAccountDetail from '@/components/salary/salaryAccountDetail'

export default {
  name: 'enterpriseArchives',
  components: {
    enterpriseDetail,
    jcEnterpriseInfo,
    enterpriseStaff,
    jcAttendance,
    jcSalaryList,
    salaryAccountDetail,
  },
  data() {
    return {
      activeName: '',
      isShowEdit: false,
      isShowInfo: true,
      isShowQyEmp: false,
      isShowQyAtt: false,
      isShowQySalary: false,
      isShowAccount: false,
      companyId: '',
      qyName: '',
      qyUscc: '',
      name: '',
      regAreaName: '',
      industryName: '',
      salaryDay: '',
    }
  },
  created() {
    this.companyId = this.$route.query.companyId
    //  this.qyName = this.$route.query.qyName;
    //  this.qyUscc = this.$route.query.qyUscc;
    this.name = this.$route.query.name
    this.getEnterpriseInfo()
    //工资代发页面进来默认企业工资tab选中
    if (this.name == 'salaryDfList') {
      this.activeName = 'fourth'
      this.isShowQySalary = true
    } else if (this.name == 'enterpriseStaff') {
      this.activeName = 'second'
      this.isShowQyEmp = true
    } else {
      this.activeName = 'second'
      this.isShowQyEmp = true
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.label == '企业员工') {
        this.isShowQyEmp = true
      } else if (tab.label == '企业考勤') {
        this.isShowQyAtt = true
      } else if (tab.label == '企业工资') {
        this.isShowQySalary = true
      } else if (tab.label == '工资专户') {
        this.isShowAccount = true
      } else if (tab.label == '基本信息') {
        this.isShowInfo = true
        this.isShowEdit = false
      }
    },
    goBack() {
      if (this.name == 'salaryDfList') {
        this.$router.push('/home/salaryDf/salaryDfList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/salaryDf/salaryDfList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.name == 'enterpriseStaff') {
        this.$router.push('/home/enterpriseSet/enterpriseStaff')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseSet/enterpriseStaff',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.name == 'employerRecordList') {
        this.$router.push('/home/enterpriseSet/employerRecordList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseSet/employerRecordList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.name == 'employerInfoList') {
        this.$router.push('/home/enterpriseSet/employerInfoList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseSet/employerInfoList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/businessManagement/settledEnterprise')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/businessManagement/settledEnterprise',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    goEdit() {
      this.isShowInfo = false
      this.isShowEdit = true
    },
    hasShowSelf(msg) {
      this.isShowEdit = msg
    },
    hasInfo(msg) {
      this.isShowInfo = msg
      this.getEnterpriseInfo()
    },
    getEnterpriseInfo() {
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/companies',
        data: {
          id: this.companyId,
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          this.qyName = res.data.result.name
          this.qyUscc = res.data.result.uscc
          this.regAreaName = res.data.result.regAreaName
          this.industryName = res.data.result.industryName
          // this.companyId =  res.data.result.companyId;
          this.salaryDay = res.data.result.salaryDay
        })
        .catch((error) => {})
    },
    goSeeDetail() {
      var oldUrl = ''
      var name = ''
      var path = ''
      if (this.name == 'settledEnterprise') {
        oldUrl = '/home/businessManagement/settledEnterprise'
        name = 'enterpriseDetailCon'
        path = '/home/enterpriseSet/enterpriseDetailCon'
      } else if (this.name == 'employerRecordList') {
        oldUrl = '/home/enterpriseSet/employerRecordList'
        name = 'employerRecordDetail'
        path = '/home/enterpriseSet/employerRecordDetail'
      } else if (this.name == 'employerInfoList') {
        oldUrl = '/home/enterpriseSet/employerInfoList'
        name = 'employerRecordDetail'
        path = '/home/enterpriseSet/employerRecordDetail'
      } else {
        oldUrl = '/home/enterpriseBasicInfo/infoMaintain'
        name = 'enterpriseDetail'
        path = '/home/enterpriseSet/enterpriseDetail'
      }
      this.$router.push({
        name: name,
        path: path,
        query: {
          companyId: this.companyId,
          routeName: 'enterpriseArchives',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    top: 52px;
    padding: 0;
  }
  .titleWrapBox {
    background: #fff;
    padding: 7px 24px 16px;
    margin-bottom: 0;
    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
    .code {
      font-size: 14px;
      color: #666;
      margin-left: 30px;
    }
    .goSeeDetail {
      font-size: 14px;
      color: #66b1ff;
      margin-left: 30px;
      cursor: pointer;
    }
    &::after {
      content: '';
      width: calc(100% + 48px);
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: relative;
      left: -24px;
      top: 16px;
    }
  }
  .topTitle {
    padding: 24px 24px 0;
    text-align: left;
    > div {
      border-radius: 5px;
      span {
        font-size: 14px;
        color: #666;
      }
    }
    .editBut {
      height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      background: #009588;
      cursor: pointer;
      &:hover {
        background-color: #009588;
        border-color: #009588;
        color: #fff;
        opacity: 0.8;
      }
    }
  }
}
</style>
